<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>备忘录</title>
    <style>
        .noborder {
            border: none
        }

        .remove {
            color: gray;
            text-decoration: line-through;
            background-color: white;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>任务总数：【{{list.length}}】，
            未完成数量：【{{notIsFinish}}】
            <input type="button" value="删除已完成的数据" @click="removeText">
        </p>
        <ul>
            <li v-for="item in list">
                <input type="checkbox" v-model="item.isFinish">
                <input type="text" v-model="item.text" class="noborder" :disabled="item.isFinish"
                    :class="{remove:item.isFinish}">
            </li>
        </ul>
        <p><input type="text" v-model.trim="newText">
            <input type="button" value="添加" @click="addText">
        </p>
    </div>
</body>
</html>
<script src="./js/vue.global.js"></script>
<script>
    let app = Vue.createApp({
        data() {
            return {
                // 添加内容
                newText: "12",
                // 准备数据
                list: [
                    {
                        text: "写html",
                        isFinish: false
                    },
                    {
                        text: "写css",
                        isFinish: true
                    },
                    {
                        text: "写js",
                        isFinish: false
                    },
                ]
            }
        },
        computed: {
            // 未完成数量
            notIsFinish: function () {
                console.log(this);
                return this.list.filter(item => !item.isFinish).length

            },

        },
        methods: {
            // 删除已完成的数据
            removeText() {
                if (confirm("是否需要删除？")) {
                    this.list = this.list.filter(item => !item.isFinish)
                }
            },
            // 添加数据
            addText() {
                // 判断是否输入为空
                if (this.newText == "") {
                    alert("请输入内容")
                    return
                }
                this.list.push({
                    text: this.newText,
                    isFinish: false
                })
                this.newText = ""
            }
        }
    })
    app.mount("#app")
</script>